<template>
  <div class="article-case">
    <!-- edit === false 以后不要出现在我们的课堂中 -->
    <!-- 这种写法是非常非常业余的写法 -->
    <!-- 某鸟某鸟才这么写, 咱们高级黑马人不要这样写 -->
    <div v-if="!edit" class="form-preview">
      <h2>{{ article.title }}</h2>
      <small>{{ article.channel }}</small>
      <!-- 在这里养成好习惯, 不是做单按钮切换, 就不要取反 -->
      <a @click="openEdit" class="btn-edit" href="#">编辑</a>
    </div>
    <div v-else class="form-edit">
      <div class="form-item">
        <div class="label">标题：</div>
        <div class="input">
          <!-- 为什么这里要用双向绑定呢? -->
          <input v-model="form.title" type="text" placeholder="请输入标题" />
        </div>
      </div>
      <div class="form-item">
        <div class="label">频道：</div>
        <div class="input">
          <select v-model="form.channel">
            <option value="">请选择频道</option>
            <option value="前端">前端</option>
            <option value="运维">运维</option>
            <option value="测试">测试</option>
          </select>
        </div>
      </div>
      <div class="form-item">
        <div class="label"></div>
        <div class="input">
          <button @click="edit = false" class="cancel">取消</button>
          <button @click="confirm" class="submit">确认</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 任务1: 搭建静态页面
// 1.1 去笔记中赋值静态页面的代码粘贴过来即可

// 任务2: 实现互斥显示
// 2.1 定义一个 edit 变量, 用于控制盒子的显示隐藏
// 2.2 使用 v-if / v-else 来控制两个盒子的显示状态
// 2.3 给编辑按钮绑定点击事件, 修改 edit 为 true
// 2.4 给取消按钮绑定点击事件, 修改 edit 为 false

// 任务3: 渲染标题和频道
// 3.1 将 article.title 和 article.channel 用插值表达式渲染到页面即可

// 任务4: 数据回显
// 4.1 使用 v-model 双向绑定 input 和 select, form
// 4.2 在用户点击编辑按钮时, 将 article 的 title / channel 赋值给 form 的 title / channel

// 任务5: 确定修改标题和频道
// 5.2 给确定按钮绑定点击事件
// 5.3 点击后将 form 的 title / channel 赋值给 article 的 title / channel
export default {
  name: "ArticleCase",
  data() {
    return {
      // 编辑状态
      edit: false,
      // 如果有一组数据要渲染, 推荐大家使用这种方式定义变量
      // 将变量放到一个对象里
      article: {
        title: "如何成为一名前端老鸟？",
        channel: "前端",
      },
      form: {
        title: "",
        channel: "",
      },
    };
  },
  methods: {
    openEdit() {
      // 访问 edit 需要加 this.
      this.edit = true;
      // 数据回显
      // 为什么我不写 this.form = this.article ?
      this.form.title = this.article.title;
      this.form.channel = this.article.channel;
    },
    confirm() {
      this.edit = false;
      // 保存数据到 article
      this.article.title = this.form.title;
      this.article.channel = this.form.channel;
    },
  },
};
</script>

<style scoped lang="less">
.form-preview {
  position: relative;
  display: flex;
  align-items: center;
}
.form-preview h2 {
  font-size: 18px;
  font-weight: normal;
}
.form-preview small {
  font-size: 12px;
  display: inline-block;
  padding: 2px 6px;
  background: #27ba9b;
  color: #fff;
  border-radius: 2px;
  transform: scale(0.8);
}
.form-preview .btn-edit {
  font-size: 12px;
  display: none;
  text-decoration: none;
  color: #069;
  margin-left: 20px;
}
.form-preview:hover .btn-edit {
  display: block;
}
.form-edit {
  padding-top: 20px;
}
.form-item {
  display: flex;
  margin-bottom: 20px;
  align-items: center;
}
.form-item .label {
  width: 60px;
  text-align: right;
  font-size: 14px;
}
.form-item .input {
  flex: 1;
}
.form-item input,
.form-item select {
  appearance: none;
  outline: none;
  border: 1px solid #ccc;
  width: 200px;
  height: 40px;
  box-sizing: border-box;
  padding: 10px;
  color: #666;
}
.form-item input::placeholder {
  color: #666;
}
.form-item .cancel,
.form-item .submit {
  appearance: none;
  outline: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 10px;
  margin-right: 10px;
  font-size: 12px;
  background: #ccc;
}
.form-item .submit {
  border-color: #069;
  background: #069;
  color: #fff;
}
</style>